<template>
    <div class="goods-list">
        <el-table stripe :data="listArr" style="width: 100%">
            <el-table-column label="组件名" align="center">
                <template #default="scope">
                    <div style="display: flex; align-items: center">
                        <span style="margin-left: 10px">{{ scope.row.name }}</span>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="图片" align="center">
                <template #default="scope">
                    <div>{{ scope.row.imgurl }}</div>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
                <template #default="scope">
                    <el-button size="small" @click="handleEdit(scope.row.cid)">
                        编辑
                    </el-button>
                    <el-button size="small" type="danger" @click="handleDelete(scope.row.cid)">
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <div class="pages_change">
        <el-pagination v-model:current-page="currentPage3" v-model:page-size="pageSize3" 
        layout="prev, pager, next, jumper" :total="total"
            @current-change="handleCurrentChange" />
    </div>
</template>
  
<script  setup>
import { ref } from "vue";
import { $_get_Data, $_delete } from "@/api/user";
import { useRouter } from "vue-router";
const router = useRouter()
const listArr = ref([])
const page = ref(1)
const pageSize = ref(10)
const currentPage3 = ref(1)
const pageSize3 = ref(10)
const total = ref(0)

const query = () => {
    $_get_Data({
        page: page.value,
        pageSize: pageSize.value,
        keyword: '',
    }).then(res => {
        listArr.value = res.result
        total.value = res.total
    })
}
query()


const handleEdit = (id) => {
    router.push({
        path: '/upload',
        query: {
            cid: id,
        }
    })
}
const handleDelete = (id) => {
    ElMessageBox.confirm(
        '确认删除吗?',
        '提现',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'error',
        }
    ).then(() => {
        $_delete({ cid: id }).then(res => {
            if (res.success) {
                ElMessage({
                    type: 'success',
                    message: res.msg,
                })
                query()
            }
        })

    })

}
const handleCurrentChange = (val) => {
    page.value = val
    query()
}


</script>
<style lang="scss" scoped>
.goods-list {
    width: 50%;
    height: 50%;
    margin: 0 auto;
    overflow-y: auto;

}
.pages_change{
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 24px;
}
</style>